<template>
    <div class="myinput">
        <label><span>{{msg}}</span><input type="text" v-model="fromObj[datakey]"/><br/>
       <transition name="fade">
        <span class="span" v-show="fromObj[verify]">{{verifymsg}}</span>
        </transition>
        </label>
        
    </div>
</template>

<script>
    export default {
        props: ['msg','fromObj','datakey','verifymsg','verify'],
    }
</script>

<style lang="scss" scoped>
    .myinput{
        label{
            display: block;
            margin: 10px;
            position: relative;
            padding-bottom: 20px;
            span{
                font-size: 15px;
                color: #666;
            }
            input{
                width: 70%;
                height: 40px;
                margin-left: 25px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
            .span{
                color: red;
                font-size: 12px;
                position: absolute;
                bottom: 0;
            }
        }
    }
    .fade-enter-active, .fade-leave-active {
  transition: all .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(-100%);}
</style>